video-worker

Video Worker

API wrapper for Youtube, Vimeo and Local videos

Getting Started

HTML

<!-- Video Worker -->
<script src="video-worker/dist/video-worker.min.js"></script>

Or use NPM

npm: npm install video-worker --save

Simple Example

import VideoWorker from 'video-worker';

const videoObject = new VideoWorker('https://www.youtube.com/watch?v=ab0TSkLe-E0');

if (videoObject.isValid()) {
    // retrieve iframe/video dom element.
    videoObject.getVideo((video) => {
        const $parent = video.parentNode;

        // insert video in the body.
        document.body.appendChild(video);

        // remove temporary parent video element (created by VideoWorker).
        $parent.parentNode.removeChild($parent);
    });
}

Video URLs examples:

• YouTube https://www.youtube.com/watch?v=ab0TSkLe-E0
• Vimeo https://vimeo.com/110138539
• Local Hosted mp4:./local-video.mp4,webm:./local-video.webm,ogv:./local-video.ogv

Note: for self-hosted videos required only 1 video type, not necessary use all mp4, webm and ogv. This need only for maximum compatibility with all browsers.

Options

Name	Type	Default	Description
autoplay	bool	false	Video autoplay.
loop	bool	false	Video playing loop.
showControls	bool	true	Video controls.
accessibilityHidden	bool	false	Add accessibility attributes for videos used on backgrounds.
mute	bool	false	Mute sound.
volume	int	100	Volume level from 0 to 100.
startTime	float	0	Start time in seconds when video will be started (this value will be applied also after loop).
endTime	float	0	End time in seconds when video will be ended.

Example

new VideoWorker('<URL_TO_YOUR_VIDEO>', {
    autoplay: true,
    loop: true,
    startTime: 10,
});

Events

Name	Parameters	Description
ready	event	Fires only once, when the video is ready to play.
volumechange	event	Fires when video volume changed.
timeupdate	event	Fires when video current time changed.
started	event	Fires only once, when the video is started playing.
play	event	Fires on video play start.
pause	event	Fires on video paused.
ended	event	Fires on video ended.
error	error	Fires on video error

Example

videoObject.on('ready', (event) => {
    console.log('video ready', event);
});

Methods

Name	Result	Description
isValid	bool	Check if the video is successfully determined and ready to use.
play	-	Play video.
pause	-	Pause video.
mute	-	Mute sound.
unmute	-	Unmute sound.
getMuted	int	Get mute state. videoObject.getMuted((muted) => { ... })
setVolume	-	Set volume level (takes integer value from 0 to 100). videoObject.setVolume(40);
getVolume	int	Get volume level. videoObject.getVolume((volume) => { ... })
getImageURL	string	Retrieves Youtube/Vimeo video poster image URL. videoObject.getImageURL((url) => { ... })
getVideo	dom	Retrieves iframe/video dom element. videoObject.getVideo((video) => { ... })

Example

videoObject.mute();

For Developers

Installation

• Run npm install in the command line. Or if you need to update some dependencies, run npm update

Building

• npm run build to run build

Linting

• npm run js-lint to show eslint errors
• npm run js-lint-fix to automatically fix some of the eslint errors